<script lang="ts" setup name="B13Watch5">
import { reactive, watch } from "vue";

const person = reactive({
  name: "张三",
  age: 18,
  car: {
    c1: "别墨我",
    c2: "大本",
  },
});

const changeName = () => {
  person.name += "~";
};
const changeAge = () => {
  person.age += 1;
};
const changeC1 = () => {
  person.car.c1 = "凹的";
};
const changeC2 = () => {
  person.car.c2 = "并言蒂";
};
const changeCar = () => {
  person.car = {
    c1: "泰陵",
    c2: "丫地",
  };
};

watch(
  () => [person.car.c1, person.name],
  (nv, ov) =>
    console.log(`变了：${JSON.stringify(ov)} -> ${JSON.stringify(nv)}`),
  { deep: true },
);
</script>
<template>
  <h1 class="text-xl border-l-8 pl-3">情况五：监视多个属性</h1>
  <div class="my-3">
    <div>姓名：{{ person.name }}</div>
    <div>年龄：{{ person.age }}</div>
    <div>车：{{ person.car.c1 }}, {{ person.car.c2 }}</div>
  </div>
  <div class="flex justify-start items-center gap-x-2">
    <button class="p-1 border shadow" @click="changeName">改名</button>
    <button class="p-1 border shadow" @click="changeAge">改年龄</button>
    <button class="p-1 border shadow" @click="changeC1">改第一台车</button>
    <button class="p-1 border shadow" @click="changeC2">改第二台车</button>
    <button class="p-1 border shadow" @click="changeCar">改电瓶车</button>
  </div>
</template>
